// eslint-disable-next-line
import React from 'react'
import './secondPage.css'
import echarts from 'echarts/lib/echarts';//引入echarts
import  'echarts/lib/chart/bar';//引入bar
class SecondPage extends React.Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    componentDidMount(){
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.clear();
        myChart.setOption({
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                axisLabel: {
                    interval: 0,
                    formatter:function(value)
                            {
                                return value.split("").join("\n");
                            },
                    textStyle: {
                        color:'#333333',
                        fontSize:'0.12rem',
                    }
                    }
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
    render(){
        return <div className="secondPage">
                  <div className="countHeader">
							<span>益农信息社区域数据统计</span>
						</div>
						<div className="chartBox">
							<div className="histogram">
								<div className="histogramTitle"><span>各区域益农信息社基础数据统计</span></div>
								
								<div className="echart_histogram" id='main'></div>
							</div>
							  
                        </div>
                        
                <div className="upSlide">
                            <a href="/#" >上一页</a>&nbsp;&nbsp;
							<a href="#/thirdPage" >下一页</a>
						</div>
            </div>
    }
}
export default SecondPage